import style from '../assets/css/home.module.css'
import { useState } from 'react'
import { useHistory } from 'react-router-dom'
import {useDispatch} from 'react-redux'
// import {Input,Button } from 'ntd-mobile/2x'
import { BillOutline, TruckOutline, UserOutline } from 'antd-mobile-icons'
import {changeStartCity,changeArriveCity} from '../store/reducer'

const List = () => {

    const history = useHistory()
    const dispatch = useDispatch()
    //起点城市
    const [startCity, setStartCity] = useState('')
    const [arriveCity, setArriveCity] = useState('')
    // 热门线路
    // const [hotList, setHotList] = useState([])

    // 切换起始点
    const exCity = () => {
        setStartCity(arriveCity)
        setArriveCity(startCity)
    }

    // 点击搜索
    const handleSearch = () => {
        // 吧起终点设置到redux中
        dispatch(changeStartCity(startCity))
        dispatch(changeArriveCity(arriveCity))
        // 跳转
        history.push({pathname:'flights',search:`?startCity=${startCity}&arriveCity=${arriveCity}`})
    }

    return (
        <div className={style.main}>
            <div className={style.ct}>
                {/* 起始点 */}
                <div className={style.cityZone}>
                    <div>
                        <div className={style.ipt}>
                            <input type='text' value={startCity} onInput={ev=>setStartCity(ev.target.value)} placeholder='选择上车地址'  />
                        </div>
                        <div>
                            <input type='text' value={arriveCity} onInput={ev=>setArriveCity(ev.target.value)}  placeholder='选择下车地址'/>
                        </div> 
                    </div>
                    <div className={style.ex} onClick={() => { exCity() }}>
                        <i className='iconfont icon-exchange2jiaohuan' ></i>
                        
                    </div>
                </div>
                {/* 搜索框 */}
                <button className={style.searchbt} onClick={() => {
                    handleSearch()
                 }}>
                    搜索
                </button>
                {/* 推荐线路 */}
                <div className={style.hotBox}>
                    <div className={style.hotTitle}>
                        推荐线路</div>
                    <div className={style.hotItems}>
                        <div className={style.hotItem}>
                            <div className={style.dot}></div>
                            <div>深圳市</div>
                            <div>广州市</div>
                        </div>
                        <div className={style.hotItem}>
                            <div className={style.dot}></div>
                            <div>深圳市</div>
                            <div>广州市</div>
                        </div>
                        <div className={style.hotItem}>
                            <div className={style.dot}></div>
                            <div>深圳市</div>
                            <div>广州市</div>
                        </div>
                        <div className={style.hotItem}>
                            <div className={style.dot}></div>
                            <div>深圳市</div>
                            <div>广州市</div>
                        </div>
                       
                    </div>
                    
                </div>
            </div>
            <div className={style.nav}>
                <div className={style.navItem}>
                    <div><BillOutline style={{ fontSize: 22 }} /></div>
                    <div>车票</div>
                </div>
                <div className={style.navItem}>
                    <div><TruckOutline style={{ fontSize: 22 }}/></div>
                    <div>乘车</div>
                </div>
                <div className={style.navItem}>
                    <div><UserOutline style={{ fontSize: 22 }}/></div>
                    <div>我的</div>
                </div>
            </div>
         </div>
    )
}

export default List 